<template>
  <div class="bpmn-container">
    <div id="bpmnContainer" class="bpmn-viewer" />
    <div class="action-buttons">
      <button @click="saveDiagram">保存图表</button>
      <button @click="exportSvg">导出 SVG</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import BpmnModeler from "bpmn-js/lib/Modeler"; // Modeler编辑 NavigatedViewe预览
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";

const bpmnContainer = ref(null);
let bpmnModeler = null;

// 示例 BPMN XML
const defaultBpmnXml = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn:process id="Process_1" isExecutable="false">
    <bpmn:startEvent id="StartEvent_1">
      <bpmn:outgoing>Flow_084crp9</bpmn:outgoing>
    </bpmn:startEvent>
    <bpmn:task id="Activity_13oxohc" name="我是">
      <bpmn:incoming>Flow_084crp9</bpmn:incoming>
      <bpmn:outgoing>Flow_06b0ngu</bpmn:outgoing>
      <bpmn:outgoing>Flow_0vnu7em</bpmn:outgoing>
    </bpmn:task>
    <bpmn:sequenceFlow id="Flow_084crp9" sourceRef="StartEvent_1" targetRef="Activity_13oxohc" />
    <bpmn:task id="Activity_0ab5tla" name="男的">
      <bpmn:incoming>Flow_06b0ngu</bpmn:incoming>
      <bpmn:outgoing>Flow_0lyw7zj</bpmn:outgoing>
    </bpmn:task>
    <bpmn:sequenceFlow id="Flow_06b0ngu" sourceRef="Activity_13oxohc" targetRef="Activity_0ab5tla" />
    <bpmn:task id="Activity_1fgci2e">
      <bpmn:incoming>Flow_0lyw7zj</bpmn:incoming>
      <bpmn:outgoing>Flow_1oo1wqx</bpmn:outgoing>
    </bpmn:task>
    <bpmn:sequenceFlow id="Flow_0lyw7zj" sourceRef="Activity_0ab5tla" targetRef="Activity_1fgci2e" />
    <bpmn:task id="Activity_0kkn6ut">
      <bpmn:incoming>Flow_1oo1wqx</bpmn:incoming>
      <bpmn:outgoing>Flow_00z8p7o</bpmn:outgoing>
    </bpmn:task>
    <bpmn:sequenceFlow id="Flow_1oo1wqx" sourceRef="Activity_1fgci2e" targetRef="Activity_0kkn6ut" />
    <bpmn:task id="Activity_0xxlbzv" name="女的">
      <bpmn:incoming>Flow_0vnu7em</bpmn:incoming>
      <bpmn:outgoing>Flow_16ajey1</bpmn:outgoing>
    </bpmn:task>
    <bpmn:sequenceFlow id="Flow_0vnu7em" sourceRef="Activity_13oxohc" targetRef="Activity_0xxlbzv" />
    <bpmn:task id="Activity_02m39ji">
      <bpmn:incoming>Flow_16ajey1</bpmn:incoming>
      <bpmn:outgoing>Flow_1k57y0c</bpmn:outgoing>
    </bpmn:task>
    <bpmn:sequenceFlow id="Flow_16ajey1" sourceRef="Activity_0xxlbzv" targetRef="Activity_02m39ji" />
    <bpmn:task id="Activity_1j394zn">
      <bpmn:incoming>Flow_1k57y0c</bpmn:incoming>
      <bpmn:outgoing>Flow_15fvc5i</bpmn:outgoing>
    </bpmn:task>
    <bpmn:sequenceFlow id="Flow_1k57y0c" sourceRef="Activity_02m39ji" targetRef="Activity_1j394zn" />
    <bpmn:endEvent id="Event_1em2n1i">
      <bpmn:incoming>Flow_15fvc5i</bpmn:incoming>
      <bpmn:incoming>Flow_00z8p7o</bpmn:incoming>
    </bpmn:endEvent>
    <bpmn:sequenceFlow id="Flow_15fvc5i" sourceRef="Activity_1j394zn" targetRef="Event_1em2n1i" />
    <bpmn:sequenceFlow id="Flow_00z8p7o" sourceRef="Activity_0kkn6ut" targetRef="Event_1em2n1i" />
  </bpmn:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="173" y="282" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_13oxohc_di" bpmnElement="Activity_13oxohc">
        <dc:Bounds x="290" y="260" width="100" height="80" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_1em2n1i_di" bpmnElement="Event_1em2n1i">
        <dc:Bounds x="1132" y="262" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0ab5tla_di" bpmnElement="Activity_0ab5tla">
        <dc:Bounds x="440" y="140" width="100" height="80" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0xxlbzv_di" bpmnElement="Activity_0xxlbzv">
        <dc:Bounds x="440" y="360" width="100" height="80" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_1fgci2e_di" bpmnElement="Activity_1fgci2e">
        <dc:Bounds x="620" y="140" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_02m39ji_di" bpmnElement="Activity_02m39ji">
        <dc:Bounds x="680" y="340" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_1j394zn_di" bpmnElement="Activity_1j394zn">
        <dc:Bounds x="860" y="370" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0kkn6ut_di" bpmnElement="Activity_0kkn6ut">
        <dc:Bounds x="860" y="180" width="100" height="80" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="Flow_084crp9_di" bpmnElement="Flow_084crp9">
        <di:waypoint x="209" y="300" />
        <di:waypoint x="290" y="300" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_06b0ngu_di" bpmnElement="Flow_06b0ngu">
        <di:waypoint x="340" y="260" />
        <di:waypoint x="340" y="180" />
        <di:waypoint x="440" y="180" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_0lyw7zj_di" bpmnElement="Flow_0lyw7zj">
        <di:waypoint x="540" y="180" />
        <di:waypoint x="620" y="180" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1oo1wqx_di" bpmnElement="Flow_1oo1wqx">
        <di:waypoint x="720" y="180" />
        <di:waypoint x="790" y="180" />
        <di:waypoint x="790" y="220" />
        <di:waypoint x="860" y="220" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_0vnu7em_di" bpmnElement="Flow_0vnu7em">
        <di:waypoint x="340" y="340" />
        <di:waypoint x="340" y="400" />
        <di:waypoint x="440" y="400" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_16ajey1_di" bpmnElement="Flow_16ajey1">
        <di:waypoint x="540" y="400" />
        <di:waypoint x="640" y="400" />
        <di:waypoint x="640" y="380" />
        <di:waypoint x="680" y="380" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1k57y0c_di" bpmnElement="Flow_1k57y0c">
        <di:waypoint x="780" y="380" />
        <di:waypoint x="820" y="380" />
        <di:waypoint x="820" y="410" />
        <di:waypoint x="860" y="410" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_15fvc5i_di" bpmnElement="Flow_15fvc5i">
        <di:waypoint x="960" y="410" />
        <di:waypoint x="1076" y="410" />
        <di:waypoint x="1076" y="280" />
        <di:waypoint x="1132" y="280" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_00z8p7o_di" bpmnElement="Flow_00z8p7o">
        <di:waypoint x="960" y="220" />
        <di:waypoint x="1066" y="220" />
        <di:waypoint x="1066" y="280" />
        <di:waypoint x="1132" y="280" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</bpmn:definitions>`;

onMounted(() => {
  // 初始化 BPMN 建模器
  bpmnModeler = new BpmnModeler({
    container: "#bpmnContainer", // 渲染 BPMN 图的 DOM 容器
  });

  // 加载 BPMN 图（XML 格式）
  bpmnModeler.importXML(defaultBpmnXml, function (err) {
    if (err) {
      console.error("加载 BPMN 失败:", err);
    } else {
      console.log("加载成功");
      // 获取视图边界并居中显示
      const canvas = bpmnModeler.get("canvas");
      canvas.zoom("fit-viewport");
    }
  });
  // bpmnModeler.createDiagram();
});

onUnmounted(() => {
  // 清理资源
  if (bpmnModeler) {
    bpmnModeler.destroy();
  }
});

// 保存图表
const saveDiagram = () => {
  if (!bpmnModeler) return;

  bpmnModeler.saveXML({ format: true }, function (err, xml) {
    if (err) {
      console.error("保存 BPMN 失败:", err);
    } else {
      console.log("BPMN 保存成功");
      // 这里可以将 XML 发送到服务器或下载
      console.log(xml);
    }
  });
};

// 导出 SVG
const exportSvg = () => {
  if (!bpmnModeler) return;

  bpmnModeler.exportSVG(function (err, svg) {
    if (err) {
      console.error("导出 SVG 失败:", err);
    } else {
      console.log("SVG 导出成功");
      // 这里可以处理 SVG 数据
      console.log(svg);
    }
  });
};
</script>

<style scoped>
.bpmn-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bpmn-viewer {
  flex: 1;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

button {
  padding: 8px 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #45a049;
}
</style>
